<template>
    <div class="m-fixed" :style="{left:fixedleft+'px',top:fixedtop+'px'}"
    @touchmove="touchmove">
        <img src="@/assets/images/fixed-icon@2x.png" alt="">
    </div>
</template>
<script>
export default {
    name:'',
    data() {
        return {
            fixedleft:110,
            fixedtop:110,
        }
    },
    methods: {
        touchmove(e) {
            let targetTouches = e.targetTouches[0];
            let pageX = targetTouches.pageX;
            let pageY = targetTouches.pageY;
            this.fixedleft = pageX - 40;
            this.fixedtop = pageY - 40;
        }
    },
    mounted() {
        let that = this;
        let clientHeight = document.documentElement.clientHeight;       //获取屏幕高度
        let clientWidth = document.documentElement.clientWidth;       //获取屏幕宽度
        that.fixedtop = clientHeight - 100;
        that.fixedleft = clientWidth - 100;
        
    }
}
</script>
<style lang="less" scoped>
/* 漂浮 */
.m-fixed{
  position: fixed;
  z-index: 2;
  img{
      width: 4.4rem;
      height: 4.4rem;
      .border-radius(100%);
      .box-shadow();            //默认值.box-shadow(0px,0px,10px,@background-gray);
  }
}

</style>
